<template>
    <div class="left_box_1">
        <div class="top_box">
            特殊工种数量统计
        </div>
        <div class="right_box">
            <div class="right_box_tab">
                <div @click="swithTabs(item,index)" v-for="(item,index) in indexs" :key="index" :class="[index == tabsInitNum ? 'active' : 'inactive']"> {{item.name}}</div>
            </div>

            <div class="echarts" style="width: 100%; height: 100%;" ref="chart"></div>
        </div>

    </div>

</template>

<script>
let Echarts = require('echarts/lib/echarts'); //基础实例 注意不要使用import
require('echarts/lib/chart/pie'); //按需引入 bar = 柱状图
export default {
    name: "index",
    data() {
        return {
            tabsInitNum: '1', // tabs初始化 - 按日
            indexs: [
                {
                    name: '正序',
                    type: 'asc'
                },
                {
                    name: '倒序',
                    type: 'desc'
                },
            ],
        };
    },
    methods: {
        // 切换tabs
        swithTabs(item, index) {
            this.tabsInitNum = index
        },

        init() {
            //2.初始化
            this.chart = Echarts.init(this.$refs.chart);
            //3.配置数据
            let option = {
                tooltip: {
                    trigger: 'item'
                },

                // 图例自定义位置
                legend: {
                    type: 'scroll',
                    orient: 'vertical', //垂直显示
                    top: '0%',
                    bottom: '0%',
                    right: '10%',
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    },
                    icon: 'circle',
                    // 图例旁的数字
                    formatter: function (name) {
                        var index = 0;
                        var clientlabels = [
                            '46~55岁',
                            '36~45岁',
                            '56岁以上',
                            '26~35岁',
                            '25岁以下',
                            '20岁以下',
                        ];
                        var clientcounts = [318, 68, 32, 32, 31, 8, 7, 1];
                        clientlabels.forEach(function (value, i) {
                            if (value == name) {
                                index = i;
                            }
                        });
                        return name + '  ' + clientcounts[index];
                    }
                },

                series: [
                    {

                        type: 'pie',
                        radius: ['65%', '85%'],
                        center: ['25%', '43%'],//距离左右，上下距离的百分比
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'center',
                            // 环形图默认中间显示固定数据
                            normal: {
                                show: true,
                                position: 'center',
                                formatter: function () {
                                    return '491\r\n 总人数';
                                },
                                textStyle: {
                                    fontSize: 18,
                                    color: '#fff'
                                }
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: [
                            { value: 318, name: '架子工' },
                            { value: 68, name: '塔吊司机' },
                            { value: 32, name: '电焊工' },
                            { value: 32, name: '塔吊指挥' },
                            { value: 31, name: '外用电梯司机' },
                            { value: 8, name: '电工' },
                            { value: 7, name: '物料提升机司机' },
                            { value: 1, name: '叉车司机' },
                        ]
                    }
                ]
            };


            // 4.传入数据
            this.chart.setOption(option);
        },


    },

    mounted() {
        this.init(),
            window.addEventListener('resize', () => {
                this.chart.resize();
            });

    }
};
</script>

<style scoped="scoped">
.left_box_1 {
    border: 1px solid #258add;
    background-color: rgb(13, 25, 45);
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
}
.top_box {
    position: absolute;
    left: 30px;
    top: -10px;
    color: #03fafb;
    font-size: 15px;
    text-shadow: 0 0 0.5rem #00d8ff;
}
.left_box {
    margin: 10px 0px 10px 30px;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    /* background-color: rgb(32, 30, 25); */
}
.left_box_item {
    display: flex;
    align-items: center;
}
.left_box_item img {
    width: 35px;
    height: 35px;
}
.left_box_item_title {
    margin-left: 10px;
}
.left_box_item_title_num {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}
.left_box_item_title_txt {
    font-size: 13px;
    color: #9ca1aa;
}

.right_box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    margin: 10px;
    background-color: rgb(13, 25, 45);
}
.right_box_tab {
    background-color: rgb(13, 25, 45);
    width: 100%;
    display: flex;
    justify-content: flex-end;
    font-size: 13px;
}
.right_box_tab div {
    padding: 5px 7px;
    cursor: pointer;
}
</style>
